
<template>
  <view class="scan-page">
    <!-- 摄像头预览区，未拍照时显示 -->
    <camera
      v-if="!photo"
      class="scan-camera"
      device-position="back"
      flash="off"
      @error="onCameraError"
      ref="camera"
    ></camera>
    <!-- 拍照后定格显示照片 -->
    <image
      v-if="photo"
      :src="photo"
      class="scan-camera"
      mode="aspectFill"
    />
    <!-- 扫描提示文字 -->
    <view class="scan-tip">请对准舞龙、舞狮、龙舟造型进行扫描</view>
    <!-- 底部拍照按钮区域 -->
    <view class="scan-btns">
      <view class="shutter-btn" @click="onConfirm">
        <!-- 拍照按钮 -->
        <view class="shutter-inner"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { identifyImages } from '@/api/recognition'; // 导入图片识别接口
// detailPages 用于随机跳转到不同类型详情页
const detailPages = [
  { type: 'xingshi', img: '@/static/lion.jpg' }, // 舞狮
  { type: 'wulong', img: '@/static/dargion.jpg' }, // 舞龙
  { type: 'longzhou', img: '@/static/longzhou.png' } // 龙舟
];
export default {
  data() {
    return {
      // 拍照后照片路径，未拍照为空
      photo: ''
    }
  },
  methods: {
    // 摄像头打开失败处理
    onCameraError() {
      uni.showToast({ title: '摄像头打开失败', icon: 'none' });
    },
    // 拍照并上传识别，识别成功后跳转详情页
    async onConfirm() {
      console.log('=== 开始拍照流程 ===');
      console.log('当前环境：真机调试');
      
      const ctx = uni.createCameraContext();
      console.log('摄像头上下文创建成功');
      
      ctx.takePhoto({
        quality: 'high',
        success: async (res) => {
          console.log('拍照成功，图片路径：', res.tempImagePath);
          console.log('图片大小：', res.tempFileSize);
          
          // 直接上传图片进行识别
          try {
            console.log('开始调用识别接口...');
            const result = await identifyImages(res.tempImagePath);
            console.log('接口返回结果：', result);
            // 判断返回数据是否有效（可根据实际接口返回结构调整判断条件）
            if (result && result.code === 200 && result.data) {
              console.log('识别成功，准备跳转...');

              // 显示识别成功提示，包含相似度信息
              const similarity = result.data.similarity || result.similarity || '未知';
              uni.showToast({
                title: `识别成功！相似度: ${similarity}`,
                icon: 'success',
                duration: 2000
              });

              // 延迟跳转，让用户看到提示信息
              setTimeout(() => {
                // 跳转到场馆详情页并传递识别结果
                uni.redirectTo({
                  url: `/pages/venue/index?type=${result.data.type || ''}&page=0&data=${encodeURIComponent(JSON.stringify(result.data))}`
                });
              }, 2000);
            } else {
              console.log('未识别到有效内容，返回结果：', result);
              uni.showToast({ title: '未识别到有效内容', icon: 'none' });
            }
          } catch (e) {
            console.error('接口调用失败：', e);
            console.error('错误详情：', JSON.stringify(e));
            uni.showToast({ title: '识别失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('拍照失败：', err);
          console.error('拍照失败详情：', JSON.stringify(err));
          uni.showToast({ title: '拍照失败', icon: 'none' });
        }
      });
    }
  }
}
</script>
<style scoped>
/* 页面基础布局 */
.scan-page { width: 100vw; height: 100vh; position: relative; background: #000; }
.scan-camera { width: 100vw; height: 100vh; }
/* 扫描提示文字样式 */
.scan-tip { position: absolute; top: 60rpx; left: 0; width: 100vw; text-align: center; color: #fff; font-size: 32rpx; z-index: 10; }
/* 底部按钮区域样式 */
.scan-btns { position: absolute; bottom: 80rpx; left: 0; width: 100vw; display: flex; justify-content: center; z-index: 20; }

/* 拍照按钮样式 */
.shutter-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.5);
  border: 4rpx solid #fff;
  padding: 6rpx;
}

/* 拍照按钮内圈 */
.shutter-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  border: 4rpx solid #ddd;
}

/* 按钮按下效果 */
.shutter-btn:active {
  transform: scale(0.95);
  background: rgba(200, 200, 200, 0.9);
}
.confirm-btn { border: 2rpx solid #27ae60; }
</style>
